<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>JQ应用章 第一课</title>
</head>

<body id="body">
	<h1 align="center">JQ应用</h1>
	<hr>
	<ol>
		<li>JS基础章的练习讲解（轮播图）</li>
		<li>JQ应用基础部分-选择器！</li>

	</ol>

	<p>演示：</p>
	<div id="banner">
		<ul>
			<li class="active"><a href="#!"><img src="./img/banner1.jpg" alt=""></a></li>
			<li><a href="#!"><img src="./img/banner2.jpg" alt=""></a></li>
			<li><a href="#!"><img src="./img/banner3.jpg" alt=""></a></li>
			<li><a href="#!"><img src="./img/banner3.jpg" alt=""></a></li>
			<li><a href="#!"><img src="./img/banner3.jpg" alt=""></a></li>
			<li><a href="#!"><img src="./img/banner4.jpg" alt=""></a></li>
		</ul>
	</div>

	<form action="">
		<p><input type="text" name="name" value="" placeholder="请输入您的名字"></p>
		<p><input type="text" name="age" value="" placeholder="请输入您的年龄"></p>
		<p>
			性别：
			<label><input type="radio" name="sex" value="0" checked="checked" >保密</label>
			<label><input type="radio" name="sex" value="1" >男</label>
			<label><input type="radio" name="sex" value="2" >女</p></label>
		<p>
			爱好：
			<label><input type="checkbox" name="aihao" value="1" >读书</label>
			<label><input type="checkbox" name="aihao" value="2" >看报</label>
			<label><input type="checkbox" name="aihao" value="3" >吃零食</label>
			<label><input type="checkbox" name="aihao" value="4" >看报</label>
		</p>
		<p>
			籍贯：
			<select name="jiguan" id="">
				<option value="">请选择</option>
				<option value="jiangsu">江苏</option>
				<option value="shandong">山东</option>
				<option value="shanghai">上海</option>
				<option value="beijing">北京</option>
			</select>
		</p>
		<p><button type="submit">提交</button></p>
	</form>

	<style>
		body, ul {	
			margin: 0;
			padding: 0;
		}
		#banner {
			width: 100%;
			height: 400px;
			overflow: hidden;
		}
		#banner ul {
			/*width: 400%;*/
			transition: 1s all;
		}
		#banner ul li {
			float: left;
			/*width: 25%;*/
		}
		/*#banner li {
			display: none;
		}
		#banner li.active {
			display: block;
		}*/
		#banner img {
			width: 100%;
		}
	</style>



	<script src="./js/Jquery.js"></script>
	<script type="text/javascript">
		// var bannerObj = document.getElementById('banner'),
		// 	liObj = bannerObj.getElementsByTagName('li');
		// bannerObj.getElementsByTagName('ul')[0].style.width = liObj.length * 100+"%";
		// for (var i = liObj.length - 1; i >= 0; i--) {
		// 	liObj[i].style.width = 100/liObj.length+'%';
		// }
		// //开启定时器
		// var timer = setInterval(function(){
		// 	// 每三秒触发一次for循环，for循环的长度是LI的条数
		// 	for (var i = 0; i < liObj.length; i++) {
		// 		// 如果检测到li包含active类名
		// 		if (liObj[i].classList.contains('active')) {
		// 			// console.log(i);
		// 			// console.log(i * -1);
		// 			bannerObj.getElementsByTagName('ul')[0].style.marginLeft = '-'+i*100+'%';
		// 			// 删除这个节点的类名
		// 			liObj[i].classList.remove('active');
		// 			// 给下一个LI添加类名，需要防止这是最后一个
		// 			if (i < liObj.length-1) {
		// 				// 如果不是第一个LI，则直接给上一个LI添加类名
		// 				liObj[i+1].classList.add('active');
		// 			} else {
		// 				// 如果是第一个LI，则直接给最后一个LI添加类名
		// 				liObj[0].classList.add('active');
		// 			}
		// 			// 如果不是最后一个LI，下一次循环，会给i-1这个LI做active检测
		// 			// break结束循环，为了防止active类名一直向上传递
		// 			break;
		// 		}
		// 	}
		// }, 1000);


		// 剩余知识点：
		// 1、jQuery
		// 	1.1 jQuery基础语法 Start
		// 	1.2 jQuery的插件应用 V
		// 	1.3 jQuery开发插件
		// 	
		// 2、BootStrap
		// 	2.1 BootStrap应用 V
		// 	2.2 用BootStrap的方式写样式
		// 	2.3 Less 、 Sass


		// 课后复习：一定要完成，已经学过的，加强记忆的。
		// 下节预习：可以不做，但必须都看过！

		// console.log($('#banner'));
		// console.log($('.active'));
		// console.log($('#banner li'));
		// console.log($('#banner li').not('.active'));
		// console.log($('[src="./img/banner3.jpg"],[src="./img/banner2.jpg"]'));
		// console.log($('[type="text/javascript"]'));
		// console.log($('#banner li').eq(1));
		// 课后复习1：所有选择器，尝试一遍
		// 课后复习2：form表单提交时，用jQ获取表单中所有元素的值
		// 课后复习3：属性章全部练习一遍
		// 课后复习4：用JQ删除轮播图第二个轮播图LI元素的所有兄弟节点的active类名，并将active类名加在第三个轮播的LI元素上
		// 课后复习5：克隆轮播图元素，并给轮播图DIV的ID追加编号，然后插入到body最后面
		// 课后复习6：克隆表单的提交按钮，插入到表单最上面，创建一个P标签，放到P标签里
		// 课后复习7：CSS章全部练习一遍，给表单form用JQ的CSS方法添加一些样式


		// 下期预习：
		// 预习1：所有JQ事件打一遍
		// 预习2：所有JQ效果打一遍
		// 预习3：准备开始JQ实战
		// 		看一遍所有示例的代码：
		// 		http://www.htmleaf.com/jQuery/Menu-Navigation/201607173742.html
		// 		http://www.htmleaf.com/jQuery/Menu-Navigation/201607153734.html
		// 		http://www.htmleaf.com/jQuery/Accordion/201605023415.html
		// 		http://www.htmleaf.com/jQuery/Accordion/201612284289.html
		//      http://www.htmleaf.com/jQuery/Menu-Navigation/201504281750.html
		// 		http://www.apple.com/


	</script>
</body>
</html>